<template>
  <div class="goods_new">
    <van-nav-bar title="意见反馈" left-arrow @click-left="goback"/>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>
    <div style="background: #fff;margin-top:10px; padding: 0 10px;">
      <textarea v-model="content" placeholder="对我们网站、商品、服务、您还有什么建议？还希望在商城中买到什么？请告诉我们..." style="border:none;width:100%;" rows="12"></textarea>
    </div>
    <div class="posR" style="background: #fff; padding: 0 10px;">
      <van-uploader :after-read="afterRead" v-model="fileList" :before-delete="imgDel" :max-count="3" :deletable=false multiple />
      <div class="zishu">{{zishu}}/500</div>
    </div>
    <div style="margin-top:10px;">
      <van-field v-model="mobile" placeholder="请输入手机号码，方便与您联系" />
    </div>
    <div class="buttonPos">
      <van-button @click="submitHandle" round type="danger" size="large">提交</van-button>
    </div>

  </div>
</template>

<script>
import { storageUpload, feedbackAdd } from '@/api/api';
import { Toast, DropdownMenu, DropdownItem, Uploader, Field } from 'vant';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],

  data() {
    return {
      list: [],
      fileList: [],
      mobile: '',
      content: '',
      picUrls: [],
      zishu: 0,
      value1: '请选择反馈类型',
      option1: [
        { text: '请选择反馈类型', value: '请选择反馈类型' },
        { text: '商品相关', value: '商品相关' },
        { text: '功能异常', value: '功能异常' },
        { text: '优化建议', value: '优化建议' },
        { text: '其他', value: '其他' }
      ],
      page: 1,
      limit: 10,
      loading: false,
      finished: false
    };
  },

  // computed: {
  //   content() {
  //     if(newVal.length <= 10) {
  //       this.zishu = newVal.length
  //     } else {
  //       this.content=this.content.substr(0,10);
  //       Toast('字数超过限制')
  //     }
  //   }
  // },
  watch: {
    content(newVal){
      if(newVal.length <= 500) {
        this.zishu = newVal.length
      } else {
        this.content=this.content.substr(0,500);
        Toast('字数超过限制')
      }
    }
  },

  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let formData = new FormData()
      formData.append('file', file.file)
      storageUpload(formData).then(res => {
        console.log(res, 'upload')
        if(res.data.errno === 0) {
          Toast('上传成功');
          this.picUrls.push(res.data.data.url)
        } else {
          Toast(res.data.errmsg);
        }
      })
    },
    imgDel() {
      // alert('sel')
    },
    submitHandle() {
      if(this.value1 === '请选择反馈类型' || this.value1 === '') {
        Toast('请选择反馈类型');
        return false
      }
      if(this.content === '') {
        Toast('请填写您的内容');
        return false
      }
      if (this.mobile === '' || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.mobile)) {
        Toast('请填写正确的电话');
        return false
      }
      let hasPictrue = false
      if(this.picUrls.length < 1) {
        hasPictrue =true
      }
      feedbackAdd({mobile: this.mobile, feedType: this.value1, content: this.content, hasPictrue: hasPictrue, picUrls: this.picUrls}).then(res => {
        console.log(res)
        console.log(res.data)
        if(res.data.errno === 0) {
          Toast('反馈成功');
          this.$router.go(-1);
        } else {
          Toast(res.data.errmsg);
        }
      })
    },
    goback() {
      this.$router.go(-1);
    }
  },

  components: {

    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    Toast
  }
};
</script>

<style lang="scss" scoped>
/deep/.van-dropdown-menu__item {
  justify-content: left;
  padding-left: 10px;
}
/deep/.van-dropdown-menu__title::after {
  left: 21rem;
  right: 0;
}
/deep/.van-uploader__preview-delete {
  display: none;
}
.posR {
  position: relative;
}
.zishu {
  position: absolute;
  right: 10px;
  top: 0;
}
.buttonPos {
  position: absolute;
  bottom: 20px;
  display: block;
  left: 20px;
  right: 20px;
}
</style>